<!--
 * @Author: 曹捷
 * @Date: 2020-06-16 17:56:59
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-12-07 10:21:59
 * @Description: 图片上传 以及显示 ，以及单纯展示图片
--> 
<template>
  <div :class="{'upload-four':showType ==='4','upload-five':showType ==='5'}" class="upload-img">
    <div class="flex-row">
      <span :key="`xx${index}`" class="img-item m-b-10" v-for="(item,index) in imgList">
        <image :src="showKey?item[showKey]:item" @click="itemClick(index)" class="image" mode="aspectFill" />
        <span class="remove-show remove" v-if="hasRemove"></span>
        <span class="hover-item remove-show">
          <i @click="itemClick(index)" class="iconfont icon-pic p-r-15" style="color:#fff" v-if="showImg"></i>
          <i @click="remove(index)" class="iconfont icon-delete" style="color:#fff" v-if="hasRemove"></i>
          <slot :slot-scope="{item,index}"></slot>
        </span>
      </span>
      <span @click="uploadImg" class="img-item m-b-10 flex-c-c" v-if="upload">
        <span class="iconfont icon-add"></span>
      </span>
      <span :key="i" class="img-item-bak" v-for="i in 4"></span>
    </div>
  </div>
</template>

<script>
import utilMix from './../../mixin/utilMix'
export default {
  mixins: [utilMix],
  props: {
    upload: {
      type: Boolean,
      default: true,
    },
    // 展示方式  一行展示3个  或者一行4，5个
    showType: {
      type: String,
      default: '3',
    },
    // 展示list  key
    showKey: {
      type: String,
      default: ''
    },
    // 返回对象 是否只要key对象
    fileKey: {
      type: String,
      default: ''
    },
    hasRemove: {
      type: Boolean,
      default: true,
    },
    showImg: {
      type: Boolean,
      default: false,
    },
    dataList: {
      type: [Array, String],
      default () {
        return []
      },
    },
    uploadSuccess: {
      type: Function
    }
  },
  data () {
    return {
      imgList: [],
    }
  },
  watch: {
    dataList (value, old) {
      if (value.length !== this.imgList.length) {
        this.dataToImgList()
      }
    },
  },
  methods: {
    dataToImgList () {
      let list = []
      if (this.dataList) {
        if (Object.prototype.toString.call(this.dataList).indexOf('String') !== -1) {
          list = [this.dataList]
        } else {
          list = this.$util.util.cloneObj(this.dataList)
        }
      }
      this.imgList = list
    },
    itemClick (index) {
      if (this.showImg) {
        uni.previewImage({
          urls: [this.fileKey ? this.imgList[index][this.fileKey] : this.imgList[index]],
          success () { },
        })
      }
      this.$emit('click', index)
    },
    imgSuccess (file) {
      if (this.uploadSuccess) {
        let value = this.uploadSuccess(file)
        this.imgList.push(value)
      } else {
        this.imgList.push(this.fileKey ? file[this.fileKey] : file)
      }
      this.$emit('update:dataList', this.imgList)
    },
    remove (index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除嘛',
        success: (res) => {
          if (res.confirm) {
            this.imgList.splice(index, 1)
            this.$emit('update:dataList', this.imgList)
          }
        },
      })
    },
  },
  mounted () {
    this.dataToImgList()
  },
}
</script>

<style lang="scss">
//------------------------------start---------------- 图片上传部分样式
.upload-img {
  // 一行展示三个图
  .img-item-bak {
    width: 200rpx;
    height: 2rpx;
  }
  .img-item {
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
    border: 1rpx dashed #99a2b0;
    display: inline-block;
    text-align: center;
    // line-height: 100px;
    position: relative;
    .remove-show {
      display: none;
      .iconfont {
        font-size: 42rpx;
      }
    }
    .remove {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      background: #7a828f;
      opacity: 0.3;
    }
    .hover-item {
      position: absolute;
      font-size: 40rpx;
      color: #5f6773;
      top: 50%;
      margin-top: -24rpx;
      width: 100%;
      text-align: center;
      left: 0;
    }
    .image {
      width: 100%;
      height: 100%;
    }
    .icon-add {
      font-size: 70rpx;
      color: #99a2b0;
    }
  }
  .img-item:hover {
    border: 1rpx solid #60d4fb;
    .remove-show {
      display: inline-block;
    }
  }
}
.upload-four {
  .img-item {
    width: 160rpx;
    line-height: 160rpx;
    height: 160rpx;
  }
  .img-item-bak {
    width: 160rpx;
    height: 2rpx;
  }
}
.upload-five {
  .img-item {
    width: 130rpx;
    height: 130rpx;
    line-height: 130rpx;
  }
  .img-item-bak {
    width: 130rpx;
    height: 2rpx;
  }
}
//------------------------------end---------------- 图片上传部分样式
</style>